<script setup>
import Table from '@/components/Table/table.vue';
import Pagination from "../../../components/Pagination/Pagination";
import { getUserApi, delUserApi } from '@/api/user';
import { onMounted, ref } from 'vue';
import { peopleTable } from '@/hooks/user';
import ImagePreview from '@/components/ImagePreview';
import { useState } from "@/hooks/index";
import { ElMessage } from "element-plus";
import addForm from "./addForm.vue";
import { formatTimes } from '@/hooks/time.js';


//==================
const defaultData = {
  current: 1,
  pageSize: 10,
  create_time: null,
  username: null,
  nickname: null,
  phone: null,
  status: null,
}
const modelValue = ref('')
const statusList = useState();
const baseUrl = import.meta.env.VITE_APP_BASE_IMG
const queryData = ref({ ...defaultData })
const userList = ref([])
const total = ref(0)
const addRef = ref();
// ===================
// 初始化数据
const initData = async () => {
  let res = await getUserApi(queryData.value)
  // console.log(res.data.rows);
  userList.value = res.data.rows
  total.value = res.data.count
}
// 处理角色名
const tagsInfo = (list) => {
  return list.map(item => {
    return item.name
  })
}
// 显示状态文字
const showState = (val) => {
  let res = statusList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
onMounted(() => {
  initData()
})
// 删除当前列
const del = async (id) => {
  let res = await delUserApi(id)
  ElMessage.success(res.msg)
  if (queryData.value.current > 1 && userList.value.length === 1) queryData.value.current--
  initData()
}
// 回显
const edit = async (id) => {
  addRef.value.replyData(id)
  addRef.value.isShow = true
}

// 搜索
const search = () => {
  // 整理数据
  // 将时间格式转时间戳
  if (queryData.value.create_time) {
    queryData.value.create_time = queryData.value.create_time.map(item => +item).join(',')
    console.log(queryData.value.create_time);
  }
  queryData.value.current = 1
  initData()
  queryData.value = { ...defaultData }

}
// 重置
const reset = () => {
  queryData.value = { ...defaultData }
  initData()
}
</script>
<template>
  <div>
    <div style="margin: 20px;">
      <el-card>
        <el-form label-position="top" label-width="80px" inline="true">
          <el-form-item label="用户名">
            <el-input v-model="queryData.username" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="queryData.nickname" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="queryData.phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="状态">
            <!-- 下拉框 -->
            <el-select v-model="queryData.status" class="m-2" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="queryData.create_time" type="datetimerange" start-placeholder="请选择"
              end-placeholder="请选择" default-time />
          </el-form-item>
          <div style="margin-top: 30px;">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 工具区域 -->
        <el-row type="flex" justify="space-between">
          <div></div>
          <div>
            <el-button type="primary" @click="addRef.isShow = true">添加信息</el-button>
          </div>
        </el-row>
      </el-card>
    </div>
    <div style="margin: 20px;">
      <el-card>
        <Table :table="peopleTable" :tableData="userList" @del="del" @edit="edit">
          <!-- 头像 -->
          <template #avatar="{ row }">
            <ImagePreview :src="baseUrl + row.avatar" :height="50" :width="50" />
          </template>
          <!-- 角色名 -->
          <template #roleList="{ row }">
            <el-tag class="ml-2" type="Success" v-for="(item, index) in tagsInfo(row.roleList)" :key="index">{{ item
            }}</el-tag>
          </template>
          <!-- 创建时间 -->
          <template #create_time="{ row }">
            {{ formatTimes(row.create_time) }}
          </template>
          <!-- 状态 -->
          <template #status="{ row }">
            {{ showState(row.status) }}
          </template>
        </Table>
        <Pagination :total="total" v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize"
          @initData="initData"></Pagination>
      </el-card>
    </div>
    <addForm ref="addRef" @updateList="initData"></addForm>
  </div>
</template>


<style scoped></style>